<script setup lang="ts">
// 1 引入 axios
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useChannelStore } from '@/stores/channel'
// 2 开始使用  语法 鸿蒙有一些区别 @ohpm/axios   axios

const list = ref<Channel[]>([])

// const props = defineProps<{ channelId: number }>()

// const emit = defineEmits<{
//   (e: 'changeChannelId', id: number): void
// }>()
// const onChangeId = (id: number) => {
//   emit('changeChannelId', id)
// }

interface RootObject {
  data: Data
  message: string
}

interface Data {
  channels: Channel[]
}

interface Channel {
  id: number
  name: string
}

onMounted(async () => {
  const result = await axios.request<RootObject>({
    url: 'http://geek.itheima.net/v1_0/channels',
  })
  // console.log(result.data.data.channels);
  // console.log(result.data.data.data.channels);
  list.value = result.data.data.channels
})
// const model = defineModel()
const store = useChannelStore()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        @click="store.setChannelId(item.id)"
        class="item"
        :class="{ active: store.channelId === item.id }"
        href="javascript:;"
        v-for="item in list"
        :key="item.id"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
